<template>
  <div class="order-list-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>预定订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>预定订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item>
          <el-dropdown @command="setState">
            <span class="el-dropdown-link">
              {{stateTitle}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ 'key' : 'state', value: '', title: '全部状态'}">全部状态</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'state', value: '1', title: '待入住'}">待入住</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'state', value: '2', title: '已入住'}">已入住</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'state', value: '3', title: '已取消'}">已取消</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'state', value: '4', title: '退房' }">退房</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'state', value: '7', title: '待确认'}">待确认</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'state', value: '8', title: '已拒绝' }">已拒绝</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setSource">
            <span class="el-dropdown-link">
              {{sourceTitle}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ 'key' : 'source', value: '', title: '全部来源' }">全部来源</el-dropdown-item>
              <div v-for="(item,index) in addSourcel"
                :key="index">
                <el-dropdown-item :command="{ 'key' : 'source', value: item.id, title: item.sourcel }">{{item.sourcel}}</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>

        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setDeposit">
            <span class="el-dropdown-link">
              {{depositTile}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ 'key' : 'time', value: '', title: '全部押金状态' }">全部押金状态</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'time', value: '1', title: '押金已付' }">押金已付</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'time', value: '2', title: '押金未付' }">押金未付</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setRoomType">
            <span class="el-dropdown-link">
              {{RoomTypeTile}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ 'key' : 'time', value: '', title: '全部房型类型' }">全部房型类型</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'time', value: '1', title: '全日房' }">全日房</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'time', value: '2', title: '钟点房' }">钟点房</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入顾客姓名"
            v-model="stayPerson"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入订单号"
            v-model="orderNum"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入酒店名/商家"
            v-model="search"
            clearable></el-input>
        </el-form-item>
        <div class="order-warpper">
          <el-form-item>
            <el-dropdown @command="setTime">
              <span class="el-dropdown-link">
                {{timeTitle}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ 'key' : 'time', value: '', title: '全部日期' }">全部日期</el-dropdown-item>
                <el-dropdown-item :command="{ 'key' : 'time', value: '0', title: '下单日期' }">下单日期</el-dropdown-item>
                <el-dropdown-item :command="{ 'key' : 'time', value: '1', title: '入住日期' }">入住日期</el-dropdown-item>
                <el-dropdown-item :command="{ 'key' : 'time', value: '2', title: '离店日期' }">离店日期</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <el-form-item>
            <el-date-picker type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              :clearable="false"
              @change="setInOutTime"
              v-model="formatTime"
              :disabled="cancelTime">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
              icon="el-icon-search"
              style=" line-height: 32px;padding: 0 21px;"
              @click="handleSearch"></el-button>
          </el-form-item>
          <el-form-item v-has="'orderrequestbase'"
            class="fr">
            <router-link :to="{ path: '/index/order_add'}">
              <el-button type="primary"
                size="small">新增订单</el-button>
            </router-link>
          </el-form-item>
        </div>
        <el-form-item></el-form-item>
        <el-form-item v-show="validOrder"
          style="margin-bottom:0;">
          <div class="validOrder"
            style="font-size:12px;">
            <p>有效订单：营业额￥{{validOrder.validSumMoney }}（房费：￥{{validOrder.validRoomMoney}}、消费：￥{{validOrder.validExpend }}、超额待收金额：￥{{validOrder.validOverstep }}）； 总押金￥{{validOrder.validDeposit }}（已退金额：￥{{validOrder.validRefund }}、账存金额：￥{{validOrder.validNoRefund}}）；推荐奖励：￥{{validOrder.validWard}}</p>
            <p>取消订单：营业额￥{{cancelOrder.sumMoney}}（房费：￥{{cancelOrder.roomMoney}}，押金：￥{{cancelOrder.deposit}}，已退金额：￥{{cancelOrder.refund}}）</p>
          </div>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-table :data="tableData"
            max-height="600"
            class="easy-table"
            v-loading="loading">
            <el-table-column prop="orderNum"
              fixed
              width="150"
              label="订单号">
            </el-table-column>
            <!-- 0-未支付，1-待入住，2-已入住，3-已取消，4-退房，5-已删除，6-已评价，7-待确认，8-已拒绝 -->
            <el-table-column label="订单状态"
              prop="stateCHI">

            </el-table-column>
            <el-table-column label="售卖房型类型"
              width="150"
              prop="roomType">

            </el-table-column>

            <el-table-column prop="stayPerson"
              label="预定人"
              width="150">
            </el-table-column>
            <el-table-column prop="bookingRoom"
              label="房型"
              width="150">
            </el-table-column>
            <el-table-column label="入住时间"
              prop="liveTime"
              width="150">

            </el-table-column>
            <el-table-column label="到店时间"
              prop="arriveTime"
              width="150">
            </el-table-column>
            <el-table-column prop="bookingRoomsNum"
              label="间/晚"
              width="150">
            </el-table-column>

            <el-table-column prop="money"
              label="订单总金额"
              width="150">
            </el-table-column>
            <el-table-column prop="roomMoney"
              label="房费"
              width="150">
            </el-table-column>
            <el-table-column prop="expend"
              label="消费"
              width="150">
            </el-table-column>
            <el-table-column label="押金(已交/总)"
              prop="deposit"
              width="150">
            </el-table-column>
            <el-table-column label="退还金额"
              prop="returnMoney"
              width="150">
            </el-table-column>
            <el-table-column label="分销奖励金额"
              prop="sellMoney"
              width="150">
            </el-table-column>
            <el-table-column prop="source"
              width="100"
              label="渠道">
            </el-table-column>
            <el-table-column prop="createTime"
              width="150"
              label="下单时间">
            </el-table-column>
            <el-table-column prop="bookingHotel"
              width="150"
              label="酒店名称">
            </el-table-column>
            <el-table-column label="操作"
              fixed="right"
              width="150">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="particulars(scope.row.id)">查看详情</el-button>
                <el-button type="text"
                  v-if="scope.row.state == 7"
                  @click="setOrderState(scope.row,1)"
                  size="small">接单</el-button>
                <el-button type="text"
                  v-if="scope.row.state == 7"
                  size="small"
                  @click="setOrderState(scope.row,8)">拒单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="orderCount">
          </el-pagination>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  getOrders,
  updateMark,
  getOrderStateList,
  getSourceList,
  updateOrderState
} from "../../public/js/order";

const Breadcrumb = () => import("@/components/common/Breadcrumb");
const cityData = require("@/data/cities.json");

export default {
  name: "orderForm",
  components: {
    Breadcrumb
  },
  data() {
    return {
      sourceTitle: "全部来源",
      timeTitle: "全部日期",
      stateTitle: "全部状态",
      depositTile: "全部押金状态",
      RoomTypeTile: "全部房型类型",
      state: "",
      date: "",
      source: "",
      content: {
        firstTitle: "订单",
        secondTitle: "订单列表",
        type: "close"
      },
      formatTime: [],
      stayPerson: "",
      orderNum: "",
      search: "",
      tableData: [],
      orderCount: 0,
      cities: [],
      showRemark: false,
      remark: "",
      id: null,
      addSourcel: [],
      deposit: "",
      pageSize: 10,
      pageNum: 1,
      time: "",
      startTime: "",
      endTime: "",
      loading: false,
      cancelTime: true,
      validOrder: "",
      cancelOrder: "",
      modeName: 0,
      type: ""
    };
  },
  created() {
    this.getOrders();
    this.getCities();
    this._getSourceList();
    this.modeName = sessionStorage.getItem("modeName");
  },
  methods: {
    //更改状态
    setOrderState(order, state) {
      let notice =
        state == 1
          ? `您确定接收${order.orderNum}订单吗?`
          : `您确定拒绝${order.orderNum}订单吗?`;
      let _state = state;
      if (_state == 1 && (this.modeName == 1 || this.modeName == 2)) {
        _state = 4;
      }
      this.$confirm(notice, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        updateOrderState({
          state: _state,
          orderId: order.id
        }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.getOrders();
          }
        });
      });
    },
    // 获取有效
    _getOrderStateList(data) {
      getOrderStateList(data).then(res => {
        this.validOrder = res.data.validOrder;
        this.cancelOrder = res.data.cancelOrder;
        this.loading = false;
      });
    },
    // 订单来源
    _getSourceList() {
      getSourceList().then(res => {
        this.addSourcel = res.data.orderSourcels;
      });
    },
    particulars(id) {
      this.$router.push("/index/order_detail?id=" + id);
    },
    getOrders() {
      this.loading = true;
      let data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        time: this.time,
        startTime: this.startTime,
        endTime: this.endTime,
        source: this.source,
        state: this.state,
        stayPerson: this.stayPerson,
        orderNum: this.orderNum,
        search: this.search,
        deposit: this.deposit,
        type: this.type
      };
      getOrders(data).then(res => {
        this.tableData = res.data.orderInfoEntities;
        this.orderCount = res.data.total;

        this._getOrderStateList(data);
      });
    },
    getCities() {
      this.cities = cityData.provincesEntities;
    },
    setTime(data) {
      this.timeTitle = data.title;
      this.time = data.value;
      this.formatTime = [];
      if (this.time !== "") {
        this.cancelTime = false;
      } else {
        this.cancelTime = true;
        this.pageSize = 10;
        this.pageNum = 1;
        this.getOrders();
      }
    },
    //售卖房型类型 1：全日房 2: 钟点房
    setRoomType(data) {
      this.RoomTypeTile = data.title;
      this.type = data.value;
      this.pageSize = 10;
      this.pageNum = 1;
      this.getOrders();
    },
    setDeposit(data) {
      this.depositTile = data.title;
      this.deposit = data.value;
      this.pageSize = 10;
      this.pageNum = 1;
      this.getOrders();
    },
    setSource(data) {
      this.sourceTitle = data.title;
      this.source = data.value;
      this.pageSize = 10;
      this.pageNum = 1;
      this.getOrders();
    },
    setState(data) {
      this.stateTitle = data.title;
      this.state = data.value;
      this.pageSize = 10;
      this.pageNum = 1;
      this.getOrders();
    },
    setInOutTime(val) {
      console.log(val);
      this.startTime = val[0];
      this.endTime = val[1];
      this.pageSize = 10;
      this.pageNum = 1;
      this.getOrders();
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.getOrders();
    },
    handleCurrentChange(value) {
      this.pageNum = value;
      this.getOrders();
    },
    handleSearch() {
      this.pageSize = 10;
      this.pageNum = 1;
      this.getOrders();
    },
    handleCascader(values) {
      this.setQuery({
        key: "city",
        value: values[0]
      });
    },
    print() {
      window.print();
    },
    showRemarkModal(id) {
      this.id = id;
      this.showRemark = true;
    },
    updateMark(id) {
      if (!this.remark) {
        return this.$message({
          message: "请输入备注",
          type: "warning"
        });
      }

      this.showRemark = false;

      updateMark(this.id, this.remark).then(() => {
        this.$message({
          message: "备注成功",
          type: "success"
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
